<template>
  <div class="sys-login" v-loading.fullscreen.lock="loading">
    <div class="login-div">
      <el-tabs stretch v-model="loginType">
        <el-tab-pane label="账号登录" name="account" class="accout-login">
          <el-form ref="form" label-width="80px" label-position="left">
            <div class="title">漫狸后台</div>
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div class="login-floor clearfix">
            <el-button type="text" size="mini" class="forget-password" @click="toResetPassword">找回密码</el-button>
          </div>
          <div style="text-align:center">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扫码登录" name="scanQrcode">
          <scan-code-login v-if="loginType==='scanQrcode'"></scan-code-login>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="找回密码" custom-class="sys-dialog" top="calc(50vh - 170px)" width="400px" :close-on-click-modal="false" :visible.sync="openDialog">
      <div style="height:280px;overflow:auto">
        <reset-password v-if="openDialog" @reset-success="openDialog=false"></reset-password>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapActions
  } from 'vuex';
  import Storage from 'storage';
  import SystemUtil from 'utils/systemUtil';
  import Login from 'models/login/login';

  import LoginApi from 'services/loginApi';

  import ResetPassword from './home/resetPassword';
  import ScanCodeLogin from './home/scanCodeLogin';

  export default {
    data() {
      return {
        loading: false,
        form: new Login(),
        loginType: 'account',
        openDialog: false
      }
    },

    created() {
      Storage.removeLocal('authToken');
      Storage.removeLocal('refreshToken');
      Storage.removeLocal('user');

      Storage.removeSession('menus');
      Storage.removeSession('bindTime');
    },

    methods: {
      login() {
        let form = this.form;
        let code = form.checkValid();
        if (code !== '') {
          this.$message(this.i18n.getMsg(`login.error.${code}`));
          return;
        }

        this.loading = true;
        LoginApi.toLogin(form).then(res => {
          let systemTime = res.systemTime;
          let nowTime = this.$moment().valueOf();
          let rangeTime = 60 * 1000;
          if (!this.$moment(systemTime).isBetween(nowTime - rangeTime, nowTime + rangeTime, 'second', '[]')) {
            this.$alert('电脑时间与服务器时间不同步，请校对', '提示', {
              callback: () => {
                this.toLoginSystem(res);
              }
            });
          } else {
            this.toLoginSystem(res);
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      toLoginSystem(res) {
        let authToken = res.auth_token;
        this.setAuthToken(authToken);
        let refreshToken = res.refresh_token;
        this.setRefreshToken({
          data: refreshToken,
          time: this.$moment().valueOf()
        });
        this.setMenus(res.menus);

        let user = res.sessionInfo;
        delete user.userPermissions;
        this.setUser(user);
        window.location.href = `${SystemUtil.getProjectName()}/homeMain`;
      },

      toResetPassword() {
        this.openDialog = true;
      },

      ...mapActions(['setAuthToken', 'setRefreshToken', 'setMenus', 'setUser'])
    },

    components: {
      ResetPassword,
      ScanCodeLogin
    }
  }

</script>

<style lang="scss" scoped>
  .sys-login {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;

    .login-div {
      @extend .center-middle;
      width: 400px;
      height: 440px;
    }

    .accout-login {
      .el-form-item {
        margin-bottom: 10px;
      }
    }

    .title {
      text-align: center;
      font-size: 4em;
      background: linear-gradient(to right, #23bcff, #da83ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .login-floor {
      .forget-password {
        float: right;
      }
    }
  }

</style>
